<template>
  <div ref="radarChartRef" />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, markRaw, defineProps } from "vue";
import * as echarts from "echarts";

// 接收参数
const props = defineProps({
  data: Array,
  title: String,
  position: Object,
  showLabel: {
    type: Boolean,
    default: false
  },
  showLegend: {
    type: Boolean,
    default: true
  }
});
const apiData = props.data;
const value = apiData.map(item => item.value);
const title = props.title;
const position = props.position;
const showLegend = props.showLegend;

// 图表绘制逻辑
const radarChartRef = ref<HTMLDivElement | null>(null);
const radarChartRefInstance = ref<echarts.ECharts | null>(null);
const initRadarOption = ref<echarts.EChartOption>({});

const color: string[] = [
  "#1296db",
  "#ffe000",
  "#ffa800",
  "#7cba59",
  "#00ffff",
  "#409B5C",
  "#ff5b00"
];

// 分割线颜色
let splitColor = "#728AE4";
initRadarOption.value = {
  // backgroundColor: "#0A1222",
  tooltip: {
    show: true,
    backgroundColor: "rgba(95,164,248, 0.65)",
    borderColor: "rgba(143, 225, 252, 0.65)",
    padding: 8,
    textStyle: {
      color: "#ffffff"
    }
  },
  legend: {
    show: showLegend
  },
  radar: {
    center: position.center, // 外圆的位置
    radius: position.radius,
    name: {
      textStyle: {
        color: "rgba(0,0,0,0.6)",
        fontSize: 13
      }
    },
    indicator: apiData,
    splitArea: {
      // 坐标轴在 grid 区域中的分隔区域，默认不显示。
      show: true,
      areaStyle: {
        // 分隔区域的样式设置。
        color: ["#b0b6f880"] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
      }
    },
    axisLine: {
      // 指向外圈文本的分隔线样式
      lineStyle: {
        color: splitColor
      }
    },
    splitLine: {
      lineStyle: {
        type: "solid",
        color: splitColor, // 分隔线颜色
        width: 1 // 分隔线线宽
      }
    }
  },
  series: [
    {
      type: "radar",
      symbolSize: 0,
      itemStyle: {
        borderColor: "rgba(91,251,199,0.6)",
        color: "#fff",
        borderWidth: 0.2
      },
      lineStyle: {
        normal: {
          width: 4,
          color: "#598df880"
        }
      },
      data: [
        {
          value: value,
          name: title,
          itemStyle: {
            borderColor: "rgba(245, 196, 85, 1)",
            color: "#fff",
            borderWidth: 0.2
          },
          lineStyle: {
            normal: {
              width: 4,
              color: "#35DA8380"
            }
          },
          areaStyle: {
            normal: {
              color: "#27525D80"
            }
          }
        }
      ]
    }
  ]
};

const initRadarChart = () => {
  if (radarChartRef.value) {
    radarChartRefInstance.value = markRaw(echarts.init(radarChartRef.value));
    radarChartRefInstance.value.setOption(initRadarOption.value, true);
  }
};

// 挂载后动作 -- 初始化图表
onMounted(() => {
  initRadarChart();
  // 图表自适应
  window.addEventListener("resize", () => {
    if (radarChartRefInstance.value) {
      radarChartRefInstance.value.resize();
    }
  });
});

// 销毁前动作 -- 销毁图表
onBeforeUnmount(() => {
  if (radarChartRefInstance.value) {
    radarChartRefInstance.value.dispose();
  }
});
</script>

<style scoped lang="scss"></style>
